<template>
  <view class="page">
    <!-- 搜索区 -->
    <view class="search-container">
      <view class="search-wrapper">
        <view class="search-box">
          <uni-easyinput
              v-model="billNo"
              placeholder="请输入运单编号"
              :prefixIcon="true"
              @input="handleInput"
          >
            <template #prefixIcon>
              <uni-icons type="search" size="16" color="#666"></uni-icons>
            </template>
          </uni-easyinput>
        </view>
        <view class="add-btn" @click="addNewItem">
          <uni-icons type="plusempty" size="24" color="#FFFFFF"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 列表区域 -->
    <scroll-view
        scroll-y
        class="scroll-container"
        @scrolltolower="loadMore"
        :style="{height: scrollHeight}"
    >
      <view class="list-container">
        <view
            v-for="item in list"
            :key="item.id"
            class="order-card"
            @click="showDetail(item)"
        >
          <view class="order-header">
            <text class="order-no">{{ item.billNo }}</text>
          </view>
          <view class="order-info">
            <view class="info-grid">
              <view class="info-item full-width">
                <image src="/static/images/function/customSend/car.png" mode="aspectFit" class="icon-img"></image>
                <text>{{ item.plateNo }}</text>
              </view>
              <view class="info-item full-width">
                <uni-icons type="location" size="16" color="#666"></uni-icons>
                <text class="text-ellipsis">{{ item.unloadLocation }}</text>
              </view>
            </view>
            <view class="time-info">
              <view class="time-item">
                <uni-icons type="calendar" size="16" color="#666"></uni-icons>
                <text class="label">配送日期：</text>
                <text>{{ item.billDate }}</text>
              </view>
              <view class="time-item">
                <uni-icons type="calendar" size="16" color="#666"></uni-icons>
                <text class="label">到达日期：</text>
                <text>{{ item.arrivedDate }}</text>
              </view>
            </view>
          </view>
        </view>
        <view v-if="loading" class="loading">加载中...</view>
      </view>
    </scroll-view>
    <!-- 新增弹窗 -->
    <uni-popup ref="popup" type="center">
      <view class="popup-content" :style="{width: '90vw', maxWidth: '600px'}">
        <view class="popup-header">
          <view class="popup-title">添加运单</view>
          <view class="close-icon" @click="closePopup">
            <uni-icons type="closeempty" size="20" color="#999"></uni-icons>
          </view>
        </view>
        <view class="form-item">
          <text class="label">车牌号：</text>
          <uni-combox
              v-model="newItem.plateNo"
              :candidates="plateNoOptions"
              placeholder="请选择车牌号"
              @input="handlePlateNoInput"
              @select="handleSelect"
              @blur="handleBlur"
              @close="handleClose"
          />
        </view>
        <view class="form-item">
          <text class="label">目的地：</text>
          <uni-easyinput v-model="newItem.unloadLocation" placeholder="请输入目的地"/>
        </view>
        <view class="form-item">
          <text class="label">配送量：</text>
          <uni-easyinput
              v-model="newItem.numberL"
              placeholder="请输入配送量（单位L）"
              type="number"
          />
        </view>
        <view class="form-item">
          <text class="label">出发时间：</text>
          <uni-datetime-picker
              v-model="newItem.billDate"
              type="datetime"
              placeholder="请选择出发时间"
          />
        </view>
        <view class="form-item">
          <text class="label">预计到达：</text>
          <uni-datetime-picker
              v-model="newItem.arrivedDate"
              type="datetime"
              placeholder="请选择预计到达时间"
          />
        </view>
        <view class="form-item">
          <text class="label">配送描述：</text>
          <uni-easyinput v-model="newItem.description" placeholder="请输入配送描述" type="textarea"/>
        </view>
        <view class="popup-buttons">
          <button class="cancel-btn" @click="closePopup">取消</button>
          <button class="confirm-btn" @click="confirmAdd">确定</button>
        </view>
      </view>
    </uni-popup>
    <!-- 详情弹窗 -->
    <uni-popup ref="detailPopup" type="center">
      <view class="popup-content detail-popup">
        <view class="popup-header">
          <view class="popup-title">运单详情</view>
          <view class="close-icon" @click="closeDetailPopup">
            <uni-icons type="closeempty" size="20" color="#999"></uni-icons>
          </view>
        </view>
        <view class="detail-attributes" style="overflow-y: auto; max-height: calc(80vh - 200rpx);">
          <view class="detail-item">
            <text class="detail-label">运单编号：</text>
            <text class="detail-value">{{ selectedItem.billNo }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">车牌号：</text>
            <text class="detail-value">{{ selectedItem.plateNo }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">目的地：</text>
            <text class="detail-value">{{ selectedItem.unloadLocation }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">配送量：</text>
            <text class="detail-value">{{ selectedItem.numberL }} 升</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">出发时间：</text>
            <text class="detail-value">{{ selectedItem.billDate }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">预计到达：</text>
            <text class="detail-value">{{ selectedItem.arrivedDate }}</text>
          </view>
          <view class="detail-item" v-if="selectedItem.description">
            <text class="detail-label">配送描述：</text>
            <text class="detail-value">{{ selectedItem.description }}</text>
          </view>
        </view>
        <view class="popup-buttons">
          <button class="seal-btn" @click="showSealOperation">铅封施拆</button>
        </view>
      </view>
    </uni-popup>

    <!-- 扫码选择弹窗 -->
    <view v-if="isScanPopupVisible" class="popup-mask" @click="closeScanPopup">
      <view class="popup-content scan-popup" @click.stop>
        <view class="popup-header">
          <text class="popup-title">选择输入方式</text>
          <view class="popup-close" @click="closeScanPopup">
            <uni-icons type="close" size="24" color="#666666"></uni-icons>
          </view>
        </view>
        <view class="scan-options">
          <view class="scan-option" @click="handleScan">
            <view class="scan-icon-wrapper">
              <uni-icons type="scan" size="40" color="#2979ff"></uni-icons>
            </view>
            <text class="scan-text">扫码输入</text>
          </view>
          <view class="scan-divider"></view>
          <view class="scan-option" @click="showManualInput">
            <view class="scan-icon-wrapper">
              <uni-icons type="compose" size="40" color="#2979ff"></uni-icons>
            </view>
            <text class="scan-text">手动输入</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 手动输入弹窗 -->
    <view v-if="isManualInputVisible" class="popup-mask" @click="closeManualInput">
      <view class="popup-content manual-input-popup" @click.stop>
        <view class="popup-header">
          <text class="popup-title">输入铅封编号</text>
          <view class="popup-close" @click="closeManualInput">
            <uni-icons type="close" size="24" color="#666666"></uni-icons>
          </view>
        </view>
        <view class="input-area">
          <input
              type="text"
              class="manual-input"
              v-model="currentSnCode"
              placeholder="请输入铅封编号"
              placeholder-class="input-placeholder"
          />
          <button class="confirm-button" @click="handleConfirmInput">
            <text class="button-text">确认</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 选择操作弹窗 -->
    <view v-if="isPopupVisible" class="popup-mask" @click="closePopup">
      <view class="popup-content" @click.stop>
        <view class="popup-header">
          <text class="popup-title operation-title">请选择操作</text>
          <view class="popup-close" @click="closePopup">
            <uni-icons type="close" size="24" color="#666666"></uni-icons>
          </view>
        </view>
        <view class="popup-buttons">
          <uni-button type="primary" class="action-button" @click="onUnseal">
            拆封
          </uni-button>
          <uni-button type="default" class="action-button outlined" @click="onApply">
            施打
          </uni-button>
        </view>
      </view>
    </view>
    <!-- 弹窗提示区域 -->
    <view
        v-if="showCustomToast"
        class="custom-toast"
        :style="{ zIndex: 999999 }"
    >
      <text class="toast-text">{{ toastMessage }}</text>
    </view>
  </view>
</template>
<script lang="ts" setup>
import {onMounted, ref, watch} from 'vue';
import {findCustomSendListByBillNo, insertCustomSend} from "@/api/function/customSend/customSend";
import {countSnCode} from '@/api/function/sealno/sealno';
import {findAllPlateNo} from '@/api/function/truck/truck';
import UniEasyinput from "@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue";
import UniDatetimePicker from '@dcloudio/uni-ui/lib/uni-datetime-picker/uni-datetime-picker.vue';
import UniCombox from '@dcloudio/uni-ui/lib/uni-combox/uni-combox.vue';
import {getSignature} from '@/api/function/common/wechat';

const billNo = ref('');
const loading = ref(false);
const scrollHeight = ref('100%');
const popup = ref<any>(null);
const detailPopup = ref<any>(null);
const selectedItem = ref<any>({});
const sealData = ref({sealNo: ''});

const isScanPopupVisible = ref(false);
const isManualInputVisible = ref(false);
const currentSnCode = ref('');
const isFromTrace = ref(false);
const isPopupVisible = ref(false);

const configureWx = async () => {
  try {
    // 获取 accessToken
    // const accessTokenResponse = await getAccessToken();
    // const accessToken = accessTokenResponse.data;
    //
    // 获取 jsapiTicket
    // const jsapiTicketResponse = await getJsapiTicket(accessToken);
    // const jsapiTicket = jsapiTicketResponse.data;

    const currentUrl = window.location.href.split('#')[0];
    const signatureData = await getSignature(currentUrl);
    console.log('getSignature 返回值:', signatureData);

    // 直接配置 wx.config，因为微信 JS SDK 已经在 main.js 中加载
    jWeixin.config({
      beta: true,
      debug: false,
      appId: 'wl6e538311bc',
      timestamp: signatureData.data.timestamp,
      nonceStr: signatureData.data.nonceStr,
      signature: signatureData.data.signature,
      jsApiList: ['scanQRCode','checkJsApi']
    });
  } catch (error) {
    console.error('配置 wx.config 失败:', error);
    throw error;
  }
};

const handleScan = async () => {
  console.log("执行扫码操作");

  try {
    jWeixin.scanQRCode({
      desc: '小额配送扫码触发',
      needResult: 1,
      scanType: ["qrCode", "barCode"],
      success: async (res) => {
        // currentSnCode.value = JSON.stringify(res);
        // currentSnCode.value = res.resultStr;
        try {
          const result = await countSnCode(res.resultStr);
          if (result.code === 200 && result.data > 0) {
            isScanPopupVisible.value = false;
            isPopupVisible.value = true;
            sealData.value.sealNo = res.resultStr;
          } else {
            console.log("进入else");
            showToast('铅封编号无效');
            return;
          }
        } catch (error) {
          showToast('网络请求失败');
        }
      }
    });
  } catch (error) {
    console.error('扫码操作失败:', error);
    uni.showToast({ title: '扫码功能初始化失败', icon: 'none' });
  }
};

const handleConfirmInput = async () => {
  if (!currentSnCode.value) {
    showToast('请输入铅封编号');
  }
  try {
    const result = await countSnCode(currentSnCode.value);
    if (result.code === 200 && result.data > 0) {
      isManualInputVisible.value = false;
      isPopupVisible.value = true;
      sealData.value.sealNo = currentSnCode.value;
    } else {
      console.log("进入else");
      showToast('铅封编号无效');
      return;
    }
  } catch (error) {
    showToast('网络请求失败');
  }
};

const showManualInput = () => {
  isScanPopupVisible.value = false;
  isManualInputVisible.value = true;
  isFromTrace.value = false;
};

const closeManualInput = () => {
  isManualInputVisible.value = false;
  isFromTrace.value = false;
};

const plateNoOptions = ref<string[]>([]);
const tempInput = ref(''); // 临时输入值

const handleInput = async (value) => {
  // 校验输入是否为数字
  if (!/^\d*$/.test(value)) {
    showToast('运单编号只能输入数字');
    return;
  }
  billNo.value = value;
  getListData(value);
};

const getListData = async (billNo = '') => {
  loading.value = true;
  try {
    const response = await findCustomSendListByBillNo(1, 10, billNo);
    if (response.code === 200) {
      list.value = response.rows.map(item => ({
        id: item.id,
        billNo: item.billNo,
        plateNo: item.plateNo,
        unloadLocation: item.unloadLocation,
        billDate: item.billDate,
        arrivedDate: item.arrivedDate,
        description: item.description,
        numberL: item.numberL
      }));
    } else {
      console.error('查询异常:', response.msg);
    }
  } catch (error) {
    console.error('获取数据失败:', error);
  } finally {
    loading.value = false;
  }
}

const showSealOperation = () => {
  isScanPopupVisible.value = true;
}

const closeScanPopup = () => {
  isScanPopupVisible.value = false;
};

const showCustomToast = ref(false);
const toastMessage = ref('');

const showToast = (message: string) => {
  toastMessage.value = message;
  showCustomToast.value = true;
  setTimeout(() => showCustomToast.value = false, 1500);
};

// 处理拆封操作
const onUnseal = () => {
  closePopup();
  uni.navigateTo({
    // url: `/pages/function/sealnoUnseal/index?snCode=${currentSnCode.value}&businessType=FIXED_WORK&billNo=`
    url: `/pages/function/sealnoUnseal/index?snCode=${sealData.value.sealNo}&businessType=CUSTOM_SEND&billNo=${selectedItem.value.billNo}`
  });
};

// 处理施打操作
const onApply = () => {
  closePopup();
  uni.navigateTo({
    // url: `/pages/function/sealnoApply/index?snCode=${currentSnCode.value}&businessType=FIXED_WORK&billNo=`
    url: `/pages/function/sealnoApply/index?snCode=${sealData.value.sealNo}&businessType=CUSTOM_SEND&billNo=${selectedItem.value.billNo}`
  });
};
const formData = ref({
  plateNo: '',
  driverName: '',
  unloadLocation: '',
  billDate: '',
  arrivedDate: '',
  description: '',
  numberL: ''
});

const list = ref([]);  // 替换原有的静态数据

onMounted(async () => {
  getListData();
  console.log('页面初始化，开始获取全量车牌号数据');
  getPlateNoOptions();
  await configureWx();
});

const getPlateNoOptions = async (keyword = '') => {
  try {
    const response = await findAllPlateNo(keyword);
    if (response.code === 200) {
      plateNoOptions.value = response.data;
    }
  } catch (error) {
    console.error('获取车牌号数据失败:', error);
  }
};

const handlePlateNoInput = (value: string) => {
  getPlateNoOptions(value);
};

const handleSelect = (value: string) => {
  tempInput.value = ''; // 选中后清空临时输入
  console.log('选中车牌号:', value); // 添加调试日志
};

const handleBlur = () => {
  // 失去焦点时检查是否有选中值
  if (!formData.value.plateNo) {
    tempInput.value = '';
  }
};

const handleClose = () => {
  // 关闭下拉框时检查是否有选中值
  if (!formData.value.plateNo) {
    tempInput.value = '';
  }
};

watch(billNo, {
  handler(newVal) {
    console.log('watch billNo:', newVal);
    if (newVal) {
      getListData(newVal);
    }
  },
  immediate: true
});
const currentPage = ref(1);
const pageSize = ref(10);
const loadMore = async () => {
  if (loading.value) return;
  loading.value = true;
  currentPage.value++;
  try {
    const response = await findCustomSendListByBillNo(currentPage.value, pageSize.value, billNo.value);
    let newItems: Array<{
      id: number;
      billNo: string;
      plateNo: string;
      unloadLocation: string;
      billDate: string;
      arrivedDate: string;
      description: string;
      numberL: string;
    }> = [];
    if (Array.isArray(response)) {
      // 如果返回的直接是数组
      newItems = response;
    } else if (response && response.data && Array.isArray(response.data.rows)) {
      // 如果返回的数据结构是 { data: { rows: [...] } }
      newItems = response.data.rows;
    } else {
      console.error('接口返回数据格式不正确');
    }
    list.value = [...list.value, ...newItems];
  } catch (error) {
    console.error('加载更多数据失败:', error);
    currentPage.value--;
  } finally {
    loading.value = false;
  }
};
const newItem = ref({
  plateNo: '',
  driverName: '',
  unloadLocation: '',
  billDate: '',
  arrivedDate: '',
  description: '',
  numberL: ''
});
const addNewItem = () => {
  // 重置新增数据容器
  newItem.value = {
    plateNo: '',
    driverName: '',
    unloadLocation: '',
    billDate: '',
    arrivedDate: '',
    description: '',
    numberL: ''
  };
  // 打开弹窗
  popup.value.open();
};
const closePopup = () => {
  isPopupVisible.value = false;
  popup.value.close();
};
const showDetail = (item: any) => {
  selectedItem.value = item;
  detailPopup.value.open();
};
const closeDetailPopup = () => {
  detailPopup.value.close();
};
const confirmAdd = async () => {
  // 检查表单数据是否为空
  if (!newItem.value.plateNo || !newItem.value.unloadLocation) {
    console.log('表单验证失败:', {
      plateNo: newItem.value.plateNo,
      unloadLocation: newItem.value.unloadLocation
    });
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    });
    return;
  }

  // 调用接口提交数据
  const res = await insertCustomSend({
    plateNo: newItem.value.plateNo.trim(),
    driverName: newItem.value.driverName.trim(),
    unloadLocation: newItem.value.unloadLocation.trim(),
    billDate: newItem.value.billDate,
    arrivedDate: newItem.value.arrivedDate,
    description: newItem.value.description.trim(),
    numberL: newItem.value.numberL
  });

  // 修改判断条件，根据 code 判断是否成功
  if (res.code === 200) {
    // 如果接口返回了完整数据，使用接口返回的数据
    if (res.data) {
      list.value = [res.data, ...list.value];
    }
    popup.value.close();
    closePopup();
    getListData();
    uni.showToast({
      title: res.msg || '添加成功',
      icon: 'success'
    });
  } else {
    uni.showToast({
      title: res.msg || '添加失败',
      icon: 'none'
    });
  }
};
</script>
<style>
page {
  height: 100%;
}

.page {
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.search-container {
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  position: relative;
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-wrapper {
  display: flex;
  gap: 20rpx;
  align-items: center;
}

.search-box {
  flex: 1;
}

.add-btn {
  width: 80rpx;
  height: 80rpx;
  background-color: #2979ff;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-container {
  flex: 1;
  overflow: auto;
}

.list-container {
  padding: 20rpx 30rpx;
}

.order-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.order-no {
  font-size: 32rpx;
  font-weight: bold;
}

.order-info {
  font-size: 28rpx;
  color: #666;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.full-width {
  width: 100%;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.temp-tag {
  background-color: #f6ffed;
  color: #52c41a;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  margin-left: 10rpx;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.description-item {
  display: flex;
  align-items: flex-start;
  gap: 10rpx;
  padding-top: 10rpx;
  border-top: 2rpx solid #f5f5f5;
}

.description-item text {
  font-size: 24rpx;
  line-height: 1.5;
}

.time-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.label {
  color: #666;
  white-space: nowrap;
}

.loading {
  text-align: center;
  color: #999;
  padding: 20rpx 0;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  margin-left: 32rpx;
  text-align: left;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0;
  position: relative;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-item .label {
  display: block;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.popup-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
}

.cancel-btn, .confirm-btn {
  flex: 1;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 8px; /* 调整圆角大小 */
  font-size: 14px;
  cursor: pointer;
  padding: 0; /* 移除默认padding */
  width: 100px; /* 设置固定宽度 */
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #ddd; /* 添加边框 */
}

.confirm-btn {
  background-color: #2979ff;
  color: #fff;
  border: 1px solid #2979ff; /* 添加边框 */
}

.seal-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #2979ff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  margin: 0;
}

.scan-popup {
  padding-bottom: 32rpx;
}

.scan-header {
  padding: 40rpx 40rpx;
  position: relative;
  border-bottom: 2rpx solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
}

.close-icon {
  position: absolute;
  right: 20rpx;
  top: 5rpx; /* 从10rpx改为5rpx，使图标位置更靠上 */
  padding: 0;
  height: 40rpx;
  width: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-body {
  padding: 60rpx 40rpx;
  height: 300rpx;
  display: flex;
  flex-direction: column;
}

.scan-methods {
  display: flex;
  height: 100%;
  position: relative;
}

.scan-methods::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 20rpx;
  bottom: 20rpx;
  width: 2rpx;
  background-color: #eee;
  transform: translateX(-50%);
}

.scan-method-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
}

.scan-method-icon {
  width: 120rpx;
  height: 120rpx;
  background-color: #f5f7fa;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.scan-method-text {
  font-size: 28rpx;
  color: #333;
}

.scan-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.scan-btn.primary {
  background-color: #2979ff;
}

.scan-btn text {
  font-size: 28rpx;
}

.detail-value {
  color: #333;
  font-size: 28rpx;
  word-break: break-all;
}

.icon-img {
  width: 20rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

/* 优化详情弹窗样式 */
.detail-popup {
  width: 800rpx;
  max-height: 80vh;
  padding: 40rpx;
  border-radius: 20rpx;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 1002;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 确保弹窗内容不会溢出 */
}

.detail-attributes {
  padding: 16rpx 20rpx;
  border-radius: 12rpx;
  background-color: #f8f9fa;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx; /* 增加属性区域和按钮的间距 */
}

.detail-popup .detail-item {
  margin-bottom: 8rpx;
  padding: 10rpx 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  flex-shrink: 0; /* 防止属性项被压缩 */
}

.detail-popup .detail-label {
  color: #666;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.detail-popup .detail-value {
  color: #333;
  font-size: 28rpx;
  word-break: break-all;
  line-height: 1.4;
  margin-left: 0;
  max-height: 120rpx; /* 增加最大高度 */
  overflow-y: auto; /* 确保内容过长时显示滚动条 */
}

.detail-popup .popup-header {
  padding: 20rpx 32rpx;
  margin-bottom: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  height: 80rpx;
  display: flex;
  align-items: center;
  position: relative;
  margin-top: -20rpx;
  flex-shrink: 0; /* 防止头部被压缩 */
}

.detail-popup .popup-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: left; /* 确保标题靠左对齐 */
  flex: 1;
  margin-left: 0; /* 移除左边距 */
}

.detail-popup .close-icon {
  position: absolute;
  right: 32rpx; /* 调整右边距，与圆角区域对齐 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直居中 */
  padding: 0;
  height: 40rpx;
  width: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-popup .popup-buttons {
  margin-top: 0;
  padding: 0;
  border-top: none;
  flex-shrink: 0; /* 防止按钮区域被压缩 */
}

.detail-popup .seal-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #2979ff;
  color: #fff;
  border-radius: 0 0 20rpx 20rpx;
  font-size: 32rpx;
  font-weight: 500;
  transition: all 0.3s;
  position: absolute;
  bottom: 0;
  left: 0;
}

.detail-popup .seal-btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.detail-item {
  margin-bottom: 20rpx;
  padding: 16rpx 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column; /* 改为垂直排列 */
}

.detail-label {
  color: #666;
  font-size: 28rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.detail-value {
  color: #333;
  font-size: 30rpx;
  word-break: break-all;
  line-height: 1.6;
  margin-left: 0; /* 移除左边距 */
}

.seal-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #2979ff;
  color: #fff;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  transition: all 0.3s;
}

.seal-btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.popup-content {
  width: 90vw;
  max-width: 600px;
  padding: 20px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  position: relative;
}

.input-placeholder {
  color: #999999;
  text-align: left !important;
  padding-left: 0;
}

.manual-input {
  width: 100%;
  height: 88rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  margin-bottom: 32rpx;
  text-align: left;
}

.manual-input-popup .input-area {
  padding: 32rpx;
}

/* 修改弹窗头部样式 */
.manual-input-popup .popup-header {
  padding: 0 32rpx;
  margin-bottom: 0;
}

.manual-input-popup .popup-title {
  font-size: 18px;
  font-weight: bold;
  text-align: left;
}

.popup-close {
  position: absolute;
  right: 24rpx;
  top: 0;
  transform: none;
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-options {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 48rpx 32rpx;
}

.scan-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.scan-icon-wrapper {
  width: 120rpx;
  height: 120rpx;
  background-color: #f0f7ff;
  border-radius: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease;
}

.scan-icon-wrapper:active {
  background-color: #e6f0ff;
}

.scan-text {
  font-size: 14px;
  color: #666;
  margin-top: 20rpx;
}

.scan-divider {
  width: 2rpx;
  height: 120rpx;
  background-color: #f0f0f0;
  margin: 0 32rpx;
}

.confirm-button {
  width: 100%;
  height: 88rpx;
  border-radius: 12rpx;
  background: linear-gradient(to right, #2979ff, #3f8cff);
  box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: none;
}

.confirm-button:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 6rpx rgba(41, 121, 255, 0.1);
}

.button-text {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
  letter-spacing: 2rpx;
}

.operation-title {
  margin-left: 32rpx;
  text-align: left;
}

.action-button {
  height: 112rpx;
  width: 300rpx; /* 增加宽度 */
  margin: 0 0 24rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  border-radius: 16rpx;
  transition: transform 0.2s ease;
}

.action-button:active {
  transform: scale(0.98);
}

.action-button:last-child {
  margin-bottom: 0;
}

.custom-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16rpx 32rpx;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  border-radius: 8rpx;
  font-size: 14px;
  min-width: 150rpx;
  text-align: center;
  z-index: 999999;
}

.outlined {
  background-color: #ffffff;
  border: 2rpx solid #2979ff;
  color: #2979ff;
}
</style>



<!--<template>-->
<!--  <view class="page">-->
<!--    &lt;!&ndash; 搜索区 &ndash;&gt;-->
<!--    <view class="search-container">-->
<!--      <view class="search-wrapper">-->
<!--        <view class="search-box">-->
<!--          <uni-icons type="search" size="20" color="#999"></uni-icons>-->
<!--          <input type="text" v-model="billNo" placeholder="请输入车牌号或公司名称" @input="handleInput"/>-->
<!--          &lt;!&ndash;          <uni-easyinput&ndash;&gt;-->
<!--          &lt;!&ndash;              v-model="billNo"&ndash;&gt;-->
<!--          &lt;!&ndash;              placeholder="请输入运单编号"&ndash;&gt;-->
<!--          &lt;!&ndash;              :prefixIcon="true"&ndash;&gt;-->
<!--          &lt;!&ndash;              @input="handleInput"&ndash;&gt;-->
<!--          &lt;!&ndash;          >&ndash;&gt;-->
<!--          &lt;!&ndash;            <template #prefixIcon>&ndash;&gt;-->
<!--          &lt;!&ndash;              <uni-icons type="search" size="16" color="#666"></uni-icons>&ndash;&gt;-->
<!--          &lt;!&ndash;            </template>&ndash;&gt;-->
<!--          &lt;!&ndash;          </uni-easyinput>&ndash;&gt;-->
<!--        </view>-->
<!--        <view class="filter-btn" @click="toggleFilterDropdown">-->
<!--          <uni-icons type="bars" size="24" color="#FFFFFF"></uni-icons>-->
<!--        </view>-->
<!--        <view v-if="isFilterDropdownVisible" class="filter-dropdown">-->
<!--          <view-->
<!--              v-for="(option, index) in filterOptions"-->
<!--              :key="index"-->
<!--              class="filter-option"-->
<!--              @click="applyFilter(option)"-->
<!--          >-->
<!--            {{ option }}-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
<!--  </view>-->
<!--</template>-->
<!--<script lang="ts" setup>-->
<!--import { ref } from 'vue';-->
<!--import UniEasyinput from "@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue";-->

<!--const billNo = ref('');-->
<!--const isFilterDropdownVisible = ref(false);-->
<!--const filterOptions = ref(['类型1', '类型2', '类型3']);-->

<!--const handleInput = async (value) => {-->
<!--  billNo.value = value;-->
<!--  // 这里的 getListData 函数在原代码中有定义，此处仅保留调用逻辑-->
<!--  getListData(value);-->
<!--};-->

<!--const getListData = async (billNo = '') => {-->
<!--  // 此处仅为示例，具体实现逻辑可根据原代码补充-->
<!--  console.log('获取数据，运单号:', billNo);-->
<!--};-->

<!--const toggleFilterDropdown = () => {-->
<!--  isFilterDropdownVisible.value = !isFilterDropdownVisible.value;-->
<!--};-->

<!--const applyFilter = (option) => {-->
<!--  isFilterDropdownVisible.value = false;-->
<!--  // 这里添加根据筛选条件调用接口获取数据的逻辑-->
<!--  console.log('应用筛选条件:', option);-->
<!--};-->
<!--</script>-->
<!--<style>-->
<!--.page {-->
<!--  height: 100%;-->
<!--  background-color: #f5f5f5;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->

<!--.search-container {-->
<!--  background-color: #ffffff;-->
<!--  padding: 20rpx 30rpx;-->
<!--  position: relative;-->
<!--  flex-shrink: 0;-->
<!--  z-index: 1;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);-->
<!--}-->

<!--.search-wrapper {-->
<!--  display: flex;-->
<!--  gap: 20rpx;-->
<!--  align-items: center;-->
<!--}-->

<!--.search-box {-->
<!--  flex: 1;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  background-color: #f5f5f5;-->
<!--  border-radius: 32rpx;-->
<!--  padding: 16rpx 24rpx;-->
<!--  margin-right: 20rpx;-->
<!--}-->

<!--.filter-btn {-->
<!--  width: 80rpx;-->
<!--  height: 80rpx;-->
<!--  background-color: rgba(70, 140, 170, 0.6);-->
<!--  border-radius: 20rpx;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--}-->

<!--.filter-dropdown {-->
<!--  position: absolute;-->
<!--  top: 100%;-->
<!--  right: 30rpx;-->
<!--  background-color: #fff;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);-->
<!--  border-radius: 8px;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.filter-option {-->
<!--  padding: 10rpx 20rpx;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.filter-option:hover {-->
<!--  background-color: #f0f0f0;-->
<!--}-->
<!--</style>-->
